<template>
	<view>
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="false" :is-back="false">
			<view class="slot-wrap">
				<view class="slot-wrap-left" @tap="back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="slot-wrap-title">知识详情</view>
				<text v-if="dataDetail.status === 2" class="common-active-text" @click="showResult">查看原因</text>
			</view>
		</u-navbar>


		<view class="container">
			<view class="news-detail-title">
				{{dataDetail.title || '标题'}}
			</view>
			<view class="news-detail-subtitle mb-25">
				<text class="type mr-15">{{dataDetail.createByName || '创建人'}}</text>
				<text class="time">{{dataDetail.createTime || '创建时间'}}</text>
			</view>
			<view class="u-content mb-20" v-if="dataDetail.resourceType === 1">
				<u-parse :html="dataDetail.details || ''" :tag-style="style"></u-parse>
			</view>
			<view class="u-content mt-20" v-if="dataDetail.resourceType === 2">
				<video :src="dataDetail.details" controls class="video">
				</video>
			</view>
		</view>
		<!-- 评价 -->
		<view class="comments-course">
			<view class="comprehensive-comments">
				<view class="common-msg-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>评论（ {{ total || 0}} ）</text>
				</view>
				<view class="comments-row" v-for="(item,index) in commentsList" :key="index"
					v-if="commentsList.length > 0">
					<view class="comments-peo">
						<u-avatar :src="item.createByFace" size="68" class="header-img"></u-avatar>
						<view class="name-date">
							<text class="name">{{item.createByName || '--'}}</text>
							<text class="date">{{item.createTime ? item.createTime.split(" ")[0] : '--'}}</text>
						</view>
					</view>
					<view class="comments-text">
						<text>{{ item.details || '--'}}</text>
					</view>
					<view class="comments-msg">
						<view class="msg">
							<image src="@/static/img/courseBuy/comments.png" mode="" @tap="commentsApply(item)"
								class="img"></image>
							<text>{{item.replyNum || 0}}</text>
						</view>
						<view class="praise">
							<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
							<text>{{item.likes || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 全部回复 -->
		<!-- #ifdef H5 -->


		<u-popup mode="bottom" v-model="isShow" border-radius="30" height="1000rpx">
			<view class="popup-content container">
				<scroll-view scroll-y="true">
					<view class="apply-title">
						{{ applyTotal || 0}} 条回复
					</view>
					<view class="comments-row">
						<view class="comments-peo">
							<u-avatar :src="curComment.createByFace ? curComment.createByFace : ''" size="68"
								class="header-img"></u-avatar>
							<view class="name-date">
								<text class="name">{{curComment.createByName || '--'}}</text>
								<text
									class="date">{{curComment.createTime ? curComment.createTime.split(" ")[0] : '--'}}</text>
							</view>
							<view class="praise">
								<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
								<text>{{curComment.likes || 0}}</text>
							</view>
						</view>
						<view class="comments-text">
							<text>{{ curComment.details || '--'}}</text>
						</view>
						<view class="applyAll">
							<view class="comments-row" v-for="val in applyList" :key="val.id">
								<view class="comments-peo">
									<u-avatar :src="val.createByFace || ''" size="68" class="header-img">
									</u-avatar>
									<view class="name-date">
										<text class="name">{{val.createByName || '--'}}</text>
										<text
											class="date">{{val.createTime ? val.createTime.split(" ")[0] : '--'}}</text>
									</view>
									<view class="praise">
										<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
										<text>{{val.likes || 0}}</text>
									</view>
								</view>
								<view class="comments-text">
									<text>回复 <text class="apply-obj">{{ val.beReplied || '回复的对象'}}</text>
									</text><text>{{ val.details || '--'}}</text>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- #endif -->
		<!-- <view class="all-reply-text" v-if="3 > 2">查看全部回复</view> -->
	</view>
</template>

<script>
	import {
		API
	} from '@/config/myApi.js';
	export default {
		data() {
			return {
				// 评分
				activeColor: '#faad39',
				inactiveColor: '#b2b2b2',
				// 数据
				dataDetail: {},
				// 文章
				style: {
					// 字符串的形式
					p: 'margin-top:24rpx;margin-bottom:34rpx;text-indent: 2em;',
					// img:'text-align:center'
				},
				//课程评论
				isShow: false, // 回复弹出层			
				curComment: {}, // 当前评论
				// 评论的参数
				commentsList: [],
				total: 0,
				params: {
					informationId: '',
					page: 1,
					rows: this.$store.state.rows,
				},
				// 回复的参数
				applyTotal: 0,
				applyList: [], // 回复的列表
				c_params: {
					commentId: '',
					page: 1,
					rows: this.$store.state.rows,
				},
			};
		},
		// components: {
		// 	Comment,
		// },
		onLoad(option) {
			let res = JSON.parse(decodeURIComponent(option.item.replace(/%/g, '%25')))
			// let res = uni.getStorageSync('expertItemDetail');
			// let res = option.item
			this.dataDetail = res;
			this.params.informationId = res.id;
			// console.log('参数',this.params);
			// console.log('详情',this.dataDetail);

			this.getCommentList(this.params)
		},

		methods: {
			back() {
				uni.navigateBack()
			},
			// 查看驳回原因
			showResult() {
				uni.navigateTo({
					url: `/pages/mine/knowledge/rejectReason?id=${this.dataDetail.id}&title=${this.dataDetail.title}`
				})

			},
			// 获取评论列表
			getCommentList(pram) {
				API.k_informationComment(pram).then(res => {
					if (res.code === 200) {
						this.commentsList = res.result.rows
						this.total = res.result.total
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('评论', res.result);
				})

			},
			// 查看回复的评论
			commentsApply(item) {

				console.log(item, '=====')
				if (item.replyNum) {
				
					this.isShow = true;
					this.curComment = {
						...item
					}
					// console.log('当前评论', this.curComment);
					let pram = {
						commentId: item.id,
						page: 1
					};

					// console.log('canshu ',pram);
					API.k_commentTreeDetail(pram).then(res => {
						if (res.code === 200) {
							this.applyList = res.result.rows
							this.applyTotal = res.result.total
							
							// #ifdef APP-PLUS
							const subNVue = uni.getSubNVueById('myPopup')
							.show('slide-out-top', 250,()=> {
								uni.$emit('send-data', {
									applyList:res.result.rows,
									applyTotal:res.result.total,
									curComment: item
								})
							});
							// #endif
							console.log('回复的评论', this.applyList);
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-detail-title {
		padding: 40rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.news-detail-subtitle {
		font-size: 24rpx;
		color: #333333;
		line-height: 20px;

		.type {
			font-weight: 500;
		}

		.time {
			color: #999999;
		}
	}

	.news-detail-content {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;

		.content-text {
			text-indent: 2em;

		}
	}

	// 文章或视频
	.u-content {
		width: 100%;
		height: auto;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-top: 18rpx;
		overflow: hidden;

		// >p{
		// 	width: 100%;
		// 	>img{
		// 		width: 100%;
		// 	}
		// }
		.video {
			width: 100%;
			margin: 0 auto;
		}
	}

	.comments-course {
		padding: 0rpx 30rpx 30rpx;
		margin-top: 10rpx;
		overflow: hidden;

		.comprehensive-comments {
			.common-msg-title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				>.img {
					width: 5rpx;
					height: 28rpx;
				}

				>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 10rpx;
				}
			}
		}
	}

	// 回复样式
	.popup-content {
		height: inherit;

		.apply-title {
			padding: 30rpx 0;
		}

		.comments-row {
			border: none;

			.praise {
				display: flex;
				align-items: center;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.applyAll {
				margin-top: 30rpx;
				padding: 0 30rpx 30rpx;
				background-color: #f6f3f7;

				.all-reply-text {
					width: 100%;
					margin: 30rpx 0;
					font-size: 24rpx;
					color: #5183d7;
					text-align: right;
				}
			}
		}

	}

	// 评论样式-共用
	.comments-row {
		padding: 37rpx 0rpx 22rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		flex-direction: column;

		&:last-child {
			border: none;
		}

		.comments-peo {
			display: flex;

			.header-img {
				width: 72rpx;
				height: 72rpx;
			}

			.name-date {
				margin-left: 19rpx;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				>text {
					display: block;
				}

				.name {
					font-size: 28rpx;
					color: #333333;
				}

				.date {
					font-size: 20rpx;
					color: #979497;
				}
			}

			.evaluation {
				display: flex;
				align-items: center;
				margin-left: auto;

				>text {
					margin-right: 8rpx;
					font-size: 20rpx;
					color: #333333;
				}

				>img {
					width: 21rpx;
					height: 21rpx;
					margin-left: 4rpx;
				}

			}
		}

		.comments-text {
			font-size: 26rpx;
			color: #333333;
			margin-top: 36rpx;
			line-height: 40rpx;

			.apply-obj {
				color: #c2c2c2;
				padding: 0 20rpx;
			}
		}

		.comments-msg {
			display: flex;
			margin-left: auto;
			margin-top: 30rpx;

			.msg,
			.praise {
				display: flex;
				align-items: center;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.praise {
				margin-left: 20rpx;
			}
		}
	}
</style>
